<!--
 -- 签到签退 主页
-->
<template>
  <div class="list-content">
    <div class="list-content-top-title">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item v-if="isMuilUnitUser">
          <el-select filterable @change="getUsers(1)" v-model="formInline.orgIds" placeholder="请选择业主单位">
            <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable @change="getData(1)" v-model="formInline.signUser" placeholder="请选择签到人">
            <el-option label="全部签到人" value></el-option>
            <el-option
              v-for="item in personnelOptions"
              :key="item.accountName"
              :label="item.name"
              :value="item.accountName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="util.intTimePickerOptions()"
            @change="getData(1)"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="search-download-form">
        <el-button class="form-search-btn" type="primary" @click="drawerTc()">下载签到点设计稿</el-button>
        <div class="search-distribution" type="primary" plain @click="viewStaffDistribution()">
          查看人员分布
          <img src="../../assets/images/nav/search_button_bottom.png" />
          <img src="../../assets/images/nav/search_button_top.png" />
        </div>
        <div class="search-trajectory" type="primary" plain @click="getSignRecordList()">
          查看人员轨迹
          <img src="../../assets/images/nav/search_button_bottom.png" />
          <img src="../../assets/images/nav/search_button_top.png" />
        </div>
      </div>
    </div>
    <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-left">
      <span style="display:none;">{{freashStaticFlag}}</span>
      <el-col :span="8">
        <div class="item-wrap" style="cursor:default;">
          <div class="item-content">
            <p class="item-value color-4">{{ staticObj.signInNum || 0 }}</p>
            <p class="item-title">签到总次数</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap" style="cursor:default;">
          <div class="item-content">
            <p class="item-value color-3">{{ staticObj.signOutNum - staticObj.signOutsysNum || 0 }}</p>
            <p class="item-title">签退总次数</p>
          </div>
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <div class="item-wrap" @click="formInline.type=1" :class="formInline.type==1 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-2">{{ staticObj.signInsysNum || 0 }}</p>
            <p class="item-title">系统补签到总次数</p>
          </div>
        </div>
      </el-col>-->
      <el-col :span="8">
        <div class="item-wrap" style="cursor:default;">
          <div class="item-content">
            <p class="item-value color-2">{{ staticObj.signOutsysNum || 0 }}</p>
            <p class="item-title">系统补签退总次数</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      :default-sort="{prop: 'signDate', order: 'descending'}"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column prop="signInPic" label="签到图片" width="100" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.signInPic"
            style="width: 50px; height: 50px"
            :src="scope.row.signInPic"
            :preview-src-list="[scope.row.signInPic]"
          ></el-image>
          <img v-else-if="scope.row.signOutType ===1" :src="defaultSystemImg" width="50" height="50" />
          <img v-else :src="defaultNFCImg" width="50" height="50" />
        </template>
      </el-table-column>
      <el-table-column label="签到时间">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span>{{ scope.row.signInDate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="signOutPic" label="签退图片" width="100" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.signOutPic"
            style="width: 50px; height: 50px"
            :src="scope.row.signOutPic"
            :preview-src-list="[scope.row.signOutPic]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="签退时间">
        <template slot-scope="scope">
          <span>{{ scope.row.signOutDate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="signUserName" label="人员姓名"></el-table-column>
      <el-table-column v-if="isMuilUnitUser" prop="signOrgName" label="签到单位"></el-table-column>
      <el-table-column prop="handlerStatus" label="查看定位">
        <template slot-scope="scope">
          <el-link
            @click="showPositionDialog(scope.row)"
            v-html="scope.row.type?(`<span class='color-3'>查看</span>`):(`<span class='color-2'>查看</span>`)"
          ></el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal"
    ></el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="签到定位"
      width="1000px"
      top="10vh"
      v-if="positionDialogFalg"
      :visible.sync="positionDialogFalg"
      @close="closePositionDialog"
      v-dialogDrag
    >
      <p-form :pisionInfo="pisionInfo"></p-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="人员分布"
      width="1200px"
      top="10vh"
      v-if="isViewStaffDistribution"
      :visible.sync="isViewStaffDistribution"
      @close="closeViewStaffDistribution"
      v-dialogDrag
    >
      <view-staff-distribution :formInline="formInline"></view-staff-distribution>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="人员轨迹"
      width="1200px"
      top="10vh"
      v-if="isResearchersTrack"
      :visible.sync="isResearchersTrack"
      @close="closeResearchersTrack"
      v-dialogDrag
    >
      <researchers-track :formInline="formInline"></researchers-track>
    </el-dialog>
    <el-drawer
      class="downloadSign-design"
      title="下载签到点设计稿"
      size="590px"
      :visible.sync="drawerSync"
      @opened="drawerOpened"
      @close="drawerClose"
    >
      <downloadSign ref="downloadSign" @closeCancel="closeCancel" :orgOptions="orgOptions"></downloadSign>
    </el-drawer>
  </div>
</template>

<script>
import {
  getSignRecordGroupList,
  getSignStatistics,
  getSignLastPoint,
  getSignRecordList,
} from '@/api/signIn'
import { getListForAdminSet } from '@/api/org'
import util from '@/utils/util'
import { getHaveOrgUserList } from '@/api/user'
import pForm from '../Common/DutyPersonPosition'
import downloadSign from '../Duty/Dialog/downloadSign'
import viewStaffDistribution from '../Duty/Dialog/viewStaffDistribution'
import ResearchersTrack from '../Duty/Dialog/ResearchersTrack'

export default {
  name: 'SignRecord',
  components: {
    pForm,
    downloadSign,
    viewStaffDistribution,
    ResearchersTrack,
  },
  data() {
    return {
      freashStaticFlag: 0,
      formInline: {
        orgIds: '',
        time: '',
        signUser: this.$store.state.userinfo.accountName,
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0,
        type: 1,
      },
      util: util,
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
      accountName: this.$store.state.userinfo.accountName,
      defaultNFCImg: require('../../assets/images/default/nfcsigniconimage.png'),
      defaultSystemImg: require('../../assets/images/default/systemsigniconimage.png'),
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [], //表格数据
      staticObj: {}, //头部各状态个数统计
      orgOptions: [],
      personnelOptions: [], // 值班人员下拉框数据
      loading: false,
      positionDialogFalg: false,
      pisionInfo: {}, //人员定位
      drawerSync: false, //下载签到点位设计稿
      isViewStaffDistribution: false, // 人员分布
      viewStaffDistributionData: [],
      isResearchersTrack: false, // 人员轨迹
      researchersTrackData: [],
    }
  },
  created: function () {
    //绑定下拉框
    if (this.isMuilUnitUser) {
      getListForAdminSet({ queryType: 0 }).then((data) => {
        this.orgOptions.push.apply(this.orgOptions, data.data)
        //this.formInline.signOrg = this.orgOptions[0].organizationId
      })
      this.formInline.orgIds = this.$store.state.userinfo.organizationIds
    }
    this.getUsers()
  },
  methods: {
    drawerOpened() {
      // 抽屉动画结束再渲染表格，不然会很卡
      this.$refs.downloadSign.init(this.orgOptions)
    },
    drawerClose() {
      this.$refs.downloadSign.orgOptions = []
    },
    //定位
    showPositionDialog(row) {
      this.positionDialogFalg = true
      row.mapLocation = {
        lon: row.signOrgLongitude,
        lat: row.signOrgLatitude,
      }
      row.onDutyPerson = [
        {
          longitude: row.signInUserLng,
          latitude: row.signInUserLat,
          byCheckName: row.signUser,
        },
      ]
      this.pisionInfo = row || {}
    },
    // 查看人员分布
    viewStaffDistribution() {
      // this.loading = true;
      this.isViewStaffDistribution = true
      // this.loading =false;
      // getSignLastPoint({
      //   signOrgIds: this.formInline.orgIds || this.$store.state.userinfo.organizationIds,
      //   queryType:1,
      //   pageIndex: this.formInline.currentPageIndex -1,
      //   pageSize: this.formInline.currentPageSize,
      //   startTime:this.formInline.time?this.formInline.time[0]:'',
      //   endTime: this.formInline.time?this.formInline.time[1]:'',
      //   signUser: this.formInline.signUser,
      //   type: this.formInline.type
      // }).then((type) => {
      //   this.viewStaffDistributionData = type.data
      //   this.isViewStaffDistribution = true
      //   this.loading =false;
      // })
    },
    // 查看人员轨迹
    getSignRecordList() {
      // this.loading = true;
      this.isResearchersTrack = true
      // this.loading =false;
      // getSignRecordGroupList({
      //   signOrgIds: this.formInline.orgIds || this.$store.state.userinfo.organizationIds,
      //   queryType:1,
      //   pageIndex: this.formInline.currentPageIndex -1,
      //   pageSize: this.formInline.currentPageSize,
      //   startTime:this.formInline.time?this.formInline.time[0]:'',
      //   endTime: this.formInline.time?this.formInline.time[1]:'',
      //   signUser: this.formInline.signUser,
      //   type: this.formInline.type
      // }).then((type) => {
      //   if(type.length<=1){
      //     this.$message.warning("暂无人员轨迹")
      //   }else{
      //     this.researchersTrackData = type.data
      //     this.isResearchersTrack = true
      //   }
      //   this.loading =false;
      // })
    },
    closeResearchersTrack() {
      this.isResearchersTrack = false
    },
    closeViewStaffDistribution() {
      this.isViewStaffDistribution = false
    },
    closePositionDialog(refresh) {
      this.positionDialogFalg = false
    },
    // 下载签到点设计稿
    drawerTc() {
      this.drawerSync = true
    },
    closeCancel() {
      this.drawerSync = false
    },
    getUsers() {
      this.loading = true
      getHaveOrgUserList({
        orgIds: this.formInline.orgIds,
      }).then((res) => {
        this.personnelOptions = res.data
        this.getData(1)
      })
    },
    getData(_pageIndex) {
      this.getList(_pageIndex)
      this.getStatis()
    },
    sizeChange(val) {
      //页码切换
      this.formInline.currentPageIndex = 1
      this.formInline.currentPageSize = val
      this.getList()
    },
    pageChange(val) {
      //翻页
      this.formInline.currentPageIndex = val
      this.getList()
    },
    getList(_pageIndex) {
      //获取列表
      if (_pageIndex) {
        this.formInline.currentPageIndex = _pageIndex
      }
      this.loading = true
      getSignRecordGroupList({
        signOrgIds:
          this.formInline.orgIds || this.$store.state.userinfo.organizationIds,
        queryType: 1,
        pageIndex: this.formInline.currentPageIndex - 1,
        pageSize: this.formInline.currentPageSize,
        startTime: this.formInline.time ? this.formInline.time[0] : '',
        endTime: this.formInline.time
          ? this.formInline.time[1].replace(/00:00:00/g, '23:59:59')
          : '',
        signUser: this.formInline.signUser,
        type: this.formInline.type,
      }).then((type) => {
        this.formInline.currentPageTotal = type.total
        this.tableData = type.data.map((n) => {
          let arr = []
          if (n.signInPic) {
            arr.push(n.signInPic)
          }
          if (n.signOutPic) {
            arr.push(n.signOutPic)
          }
          n.srcList = arr
          return n
        })
        this.loading = false
      })
    },
    getStatis() {
      //头部统计
      //this.staticObj = {}
      getSignStatistics({
        signOrgIds:
          this.formInline.orgIds || this.$store.state.userinfo.organizationIds,
        startTime: this.formInline.time ? this.formInline.time[0] : '',
        endTime: this.formInline.time
          ? this.formInline.time[1].replace(/00:00:00/g, '23:59:59')
          : '',
        signUser: this.formInline.signUser,
      }).then((type) => {
        $.extend(this.staticObj, type.data)
        this.freashStaticFlag++
      })
    },
  },
  watch: {
    isResult(val, oldVal) {
      if (val !== oldVal) {
        this.getList(1)
      }
    },
  },
  computed: {
    isResult() {
      return this.formInline.type
    },
  },
}
</script>
<style scoped>
.list-content-top-title {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}
.search-distribution,
.search-trajectory {
  padding: 10px 20px 10px 50px;
  background-image: url('../../assets/images/nav/search_button.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  cursor: pointer;
  position: relative;
}

.search-distribution:hover.search-distribution > img:nth-child(2) {
  animation: myMove 1s infinite;
  -webkit-animation: myMove 1s infinite;
}

.search-trajectory:hover.search-trajectory > img:nth-child(2) {
  animation: myMove 1s infinite;
  -webkit-animation: myMove 1s infinite;
}

.search-distribution > img:nth-child(1),
.search-trajectory > img:nth-child(1) {
  position: absolute;
  left: 10px;
  top: 8px;
}

@keyframes myMove {
  0% {
    top: -10px;
  }

  50% {
    top: -20px;
  }

  100% {
    top: -10px;
  }
}

@-webkit-keyframes myMove {
  0% {
    top: -10px;
  }

  50% {
    top: -20px;
  }

  100% {
    top: -10px;
  }
}

.search-distribution > img:nth-child(2),
.search-trajectory > img:nth-child(2) {
  position: absolute;
  left: 16px;
  top: -10px;
}

.search-download-form {
  display: inline-flex;
  height: 40px;
  width: 480px;
  justify-content: space-between;
}
</style>